<template>
  <div class="account-stats-container">
    <!-- 账户余额卡片 -->
    <el-card class="stat-card balance-card" shadow="hover">
      <div class="stat-icon">
        <el-icon><Money /></el-icon>
      </div>
      <div class="stat-content">
        <div class="stat-title">账户余额</div>
        <div class="stat-value money-value">{{ formatMoney(userInfo.money) }}<span class="currency">日元</span></div>
        <div class="stat-actions">
          <el-button type="primary" size="small" plain>
            <el-icon><Plus /></el-icon>充值
          </el-button>
          <el-button type="warning" size="small" plain>
            <el-icon><Wallet /></el-icon>提现
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 信用评分卡片 -->
    <el-card class="stat-card credit-card" shadow="hover">
      <div class="stat-icon">
        <el-icon><TrophyBase /></el-icon>
      </div>
      <div class="stat-content">
        <div class="stat-title">信用评分</div>
        <div class="stat-value">
          {{ userInfo.credit }}
          <el-progress :percentage="creditPercentage" :show-text="false" status="success" style="margin-top: 8px;"></el-progress>
        </div>
      </div>
    </el-card>

    <!-- 成长值卡片 -->
    <el-card class="stat-card growth-card" shadow="hover">
      <div class="stat-icon">
        <el-icon><TrendCharts /></el-icon>
      </div>
      <div class="stat-content">
        <div class="stat-title">成长值</div>
        <div class="stat-value">
          {{ userInfo.grow }}
          <el-progress :percentage="growthPercentage" :show-text="false" style="margin-top: 8px;"></el-progress>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { Money, TrophyBase, TrendCharts, Plus, Wallet } from '@element-plus/icons-vue'

const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({})
  }
})

// 格式化金额
const formatMoney = (money) => {
  if (!money) return '0.00'
  // 转换为数字并格式化
  const amount = parseFloat(money)
  // 如果金额大于1000，使用千分位分隔符
  if (amount >= 1000) {
    return amount.toLocaleString('ja-JP', {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2
    })
  }
  // 小金额保留两位小数
  return amount.toFixed(2)
}

// 计算信用评分百分比
const creditPercentage = computed(() => {
  const credit = parseFloat(props.userInfo.credit) || 0
  return Math.min(credit, 100)
})

// 计算成长值百分比
const growthPercentage = computed(() => {
  const grow = parseFloat(props.userInfo.grow) || 0
  // 假设成长值满分为100
  return Math.min(grow, 100)
})
</script>

<style scoped>
.account-stats-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.stat-card {
  flex: 1;
  min-width: 200px;
  display: flex;
  padding: 15px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.balance-card {
  background: linear-gradient(135deg, #4a90e2 0%, #1976d2 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
  border: none;
}

.credit-card {
  background: linear-gradient(135deg, #67c23a 0%, #4caf50 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(103, 194, 58, 0.3);
  border: none;
}

.growth-card {
  background: linear-gradient(135deg, #e6a23c 0%, #f39c12 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(230, 162, 60, 0.3);
  border: none;
}

.stat-icon {
  font-size: 40px;
  opacity: 0.9;
  margin-right: 15px;
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 10px;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  justify-content: center;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.money-value {
  font-size: 28px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

.currency {
  font-size: 14px;
  margin-left: 5px;
  opacity: 0.8;
}

.stat-actions {
  display: flex;
  gap: 10px;
  margin-top: 5px;
}

.stat-actions .el-button {
  flex: 1;
  padding: 6px 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-actions .el-button .el-icon {
  margin-right: 4px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .account-stats-container {
    flex-direction: column;
  }
  
  .stat-card {
    width: 100%;
  }
}
</style>